<template>
	<div id="role">
		<!--添加和修改角色的模态框-->
		<Modal
	        v-model="modal1"
	        :title="modalTitle"
	        width="650px"
	        class="roleModalStyle"
	        @on-ok="modalOk">
	        <div class="content">
				<div>
					<p class="tag">角色名称:</p>
					<Input v-model="roleData.name"/>
				</div>
				<div>
					<p class="tag">角色描述:</p>
					<Input type="textarea" v-model="roleData.remark"/>
				</div>
				<div>
					<p class="tag">状态:</p>
					<RadioGroup v-model="roleData.status">
				        <Radio label="ENABLE">有效</Radio>
				        <Radio label="DISABLE">无效</Radio>
				    </RadioGroup>
				</div>
	        </div>
	    </Modal>
	    <!--角色授权的模态框-->
	    <Modal
	        v-model="modal2"
	        title="角色授权"
	        class="accreditModalStyle"	        
	        @on-ok="accreditOk">
	        <div class="content">
				<Tree ref="Tree" :data="accreditData" :load-data="loadData" show-checkbox></Tree>
	        </div>
	    </Modal>
		<div class="top">
			<div></div>
			<div>
				<Button class="add" @click="add">添加</Button>
			</div>
		</div>
		<div class="main" v-if='show'>
			<table>
				<tr>
					<th>角色名称</th>
					<th>角色描述</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="role in roles">
					<td>{{role.name}}</td>
					<td>{{role.remark}}</td>
					<td>{{role.status|userStatus}}</td>
					<td class="handle">
						<span class='iconfont' @click="edit(role)" title="编辑">&#xe601;</span>
						<span class='iconfont' @click="accredit(role)" title="授权">&#xe6f1;</span>
					</td>
				</tr>
			</table>
		</div>
		<Pagination :search='getRoles' :request='request' :data='roles'/>
	</div>
	
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "./style.scss";
</style>